<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px" class="layout-aside">
      <el-menu
        :default-active="$route.path"
        class="layout-menu"
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
        :router="true" 
      >
      
        <el-menu-item index="/home">首页</el-menu-item>
        <template v-for="(menu,index) in userStore.nav" :key="index">
          <el-sub-menu  v-if="menu.type===1">
            <template #title>
              <span> {{ menu.title }}</span>
            </template>
            <template v-for="(childMenu,index) in menu.children" :key="index">
             <el-menu-item :index="childMenu.path" v-if="childMenu.type===2">
                {{ childMenu.title }}
             </el-menu-item>
            </template>
           
          </el-sub-menu>
        </template>

        <!--
        <el-sub-menu index="/system">
          <template #title>
             <span>系统管理</span>
          </template>
          <el-menu-item index="/system/user">用户管理</el-menu-item>
          <el-menu-item index="/system/role">角色管理</el-menu-item>
          <el-menu-item index="/system/permission">权限管理</el-menu-item>
        </el-sub-menu>
      -->
        <!-- 动态渲染菜单 -->
         <!--
        <template v-for="menu in menus" :key="menu.path">
           没有子菜单，直接渲染 el-menu-item 
          <el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.path">
            {{ menu.title }}
          </el-menu-item>

           有子菜单，渲染 el-sub-menu 
          <el-sub-menu v-else :index="menu.path">
            <template #title>{{ menu.title }}</template>
            <el-menu-item
              v-for="child in menu.children"
              :key="child.path"
              :index="child.path"
            >
              {{ child.title }}
            </el-menu-item>
          </el-sub-menu>
        </template>
        -->
      </el-menu>
    </el-aside>

    <!-- 右侧主内容区域 -->
    <el-container class="right-container">
      <!-- 头部：面包屑 + 用户信息 -->
      <el-header height="60px" class="layout-header">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user-info">
          
         <el-dropdown>
            <span class="el-dropdown-link">
             <span>欢迎，管理员</span>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goInfo">查看个人信息</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
               
              </el-dropdown-menu>
            </template>
  </el-dropdown>
        </div>
      </el-header>

      <!-- 主体内容区域 -->
      <el-main class="layout-main">
        <!-- 动态路由出口 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted ,watch} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getResources } from '../api/auth'
import { useUserInfoStore } from '../store/index'

const route = useRoute()
const router = useRouter()
const userStore = useUserInfoStore()
// 存储菜单数据
const menus = ref([])


// 当前路径的面包屑
const breadcrumbList = ref([])

// 自动更新面包屑
// 自动更新面包屑
const updateBreadcrumb = () => {
  const matched = route.matched.filter(item => item.name !== 'home')
  // 过滤掉“首页”项
  const list = matched.map(item => item.meta.title || item.name).filter(title => title !== '首页')
  breadcrumbList.value = list
}

// 动态获取后端的菜单
const fetchMenus = async () => {
  try {
    const res = await axios.get('/api/menu/list') // 替换为你的真实接口地址
    menus.value = res.data
  } catch (error) {
    console.error('获取菜单失败', error)
  }
}

// 动态获取资源
let getRes = async () => {
  try{

    if( !(userStore.nav && userStore.nav.length > 0) ){
      let res = await getResources()
      // 将数据放入到pinia中
      userStore.setNav(res.data.menus)
      //menus.value = res.data.menus
    }
  }catch( error ){

  }
}


onMounted(async () => {
  await updateBreadcrumb()
 //await getRes()
})

// 路由变化时更新面包屑
watch(() => route.path, () => {
  updateBreadcrumb()
})

function logout() {
  // 这里可以执行退出逻辑
  router.push('/login')
}

function goInfo(){
  router.push("/userInfo")
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.layout-aside {
  background-color: #545c64;
  padding-top: 20px;
}

.layout-menu {
  border-right: none;
}

.right-container {
  flex-direction: column;
}

.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
}

.breadcrumb {
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout-main {
  padding: 20px;
  background-color: #f9fafb;
}
</style>